<script type="text/javascript" src="../js/jquery/jquery-1.12.5.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404</title>
    <style>
    	.nonentity{
		     width: 500px;
		     height: 500px;
		     margin: 0 auto;
		     padding-top: 30px;
		     position: relative;
		 }
		.nonentity .n_404{
		    text-align: center;
		    position: relative;
		}
		.nonentity .circle{
		    height: 15px;
		    width: 15px;
		    -webkit-border-radius: 100px;
		    -moz-border-radius: 100px;
		    border-radius: 100px;
		    position: absolute;
		
		    -webkit-transition: all .5s;
		    -moz-transition: all .5s;
		    -ms-transition: all .5s;
		    -o-transition: all .5s;
		    transition: all .5s;
		}
		
		.nonentity .circle_l{
		    background: #cfe5a1;
		    left: 140px;
		    top: 90px;
		
		    -webkit-animation: circle 1s infinite;
		    -o-animation: circle 1s infinite;
		    animation: circle 1s infinite;
		}
		@keyframes circle {
		    0%{
		        -webkit-transform: scale(0);
		        -moz-transform: scale(0);
		        -ms-transform: scale(0);
		        -o-transform: scale(0);
		        transform: scale(0);
		    }
		    50%{
		        -webkit-transform: scale(1);
		        -moz-transform: scale(1);
		        -ms-transform: scale(1);
		        -o-transform: scale(1);
		        transform: scale(1);
		    }
		    100%{
		        -webkit-transform: scale(0);
		        -moz-transform: scale(0);
		        -ms-transform: scale(0);
		        -o-transform: scale(0);
		        transform: scale(0);
		    }
		}
		.nonentity .circle_r{
		    background: #ecb2a7;
		    left: 170px;
		    top: 230px;
		
		    -webkit-animation: circle_r 2s infinite;
		    -o-animation: circle_r 2s infinite;
		    animation: circle_r 2s infinite;
		}
		@keyframes circle_r {
		    0%{
		        -webkit-transform: scale(0);
		        -moz-transform: scale(0);
		        -ms-transform: scale(0);
		        -o-transform: scale(0);
		        transform: scale(0);
		    }
		    50%{
		        -webkit-transform: scale(1);
		        -moz-transform: scale(1);
		        -ms-transform: scale(1);
		        -o-transform: scale(1);
		        transform: scale(1);
		    }
		    100%{
		        -webkit-transform: scale(0);
		        -moz-transform: scale(0);
		        -ms-transform: scale(0);
		        -o-transform: scale(0);
		        transform: scale(0);
		    }
		}
		.nonentity .circle_q{
		    width: 20px;
		    height: 20px;
		    background: #99d2f6;
		    left: 270px;
		    top: 215px;
		
		    -webkit-animation: circle_r 1.5s infinite;
		    -o-animation: circle_r 1.5s infinite;
		    animation: circle_r 1.5s infinite;
		}
		
		@keyframes circle_r {
		    0%{
		        -webkit-transform: scale(0);
		        -moz-transform: scale(0);
		        -ms-transform: scale(0);
		        -o-transform: scale(0);
		        transform: scale(0);
		    }
		    50%{
		        -webkit-transform: scale(1);
		        -moz-transform: scale(1);
		        -ms-transform: scale(1);
		        -o-transform: scale(1);
		        transform: scale(1);
		    }
		    100%{
		        -webkit-transform: scale(0);
		        -moz-transform: scale(0);
		        -ms-transform: scale(0);
		        -o-transform: scale(0);
		        transform: scale(0);
		    }
		}
		.nonentity .n_yun{
		    display: inline-block;
		    margin-left: 65px;
		
		    -webkit-animation:  yun 5s infinite;
		    -o-animation:  yun 5s infinite;
		    animation: yun 5s infinite;
		
		    position: relative;
		    left: 0;
		}
		@keyframes yun {
		    0%{
		        left: 0;
		        opacity: 1;
		    }
		    25%{
		        opacity:.8;
		    }
		    50%{
		        opacity: .5;
		    }
		    75% {
		        left: -60px;
		        opacity: 0;
		    }
		    100% {
		        left: 0;
		        opacity: 0;
		    }
		}
		.nonentity .n_yun .n_y_3{
		    position: relative;
		    left: 30px;
		    top: 10px;
		}
		.nonentity .n_yun .n_y_2{
		    position: relative;
		    left: -30px;
		    top:10px;
		}
		.nonentity .text{
		    padding-top: 60px;
		    text-align: center;
		    font-size: 24px;
		}
    </style>	
</head>
<body>
    <div class="nonentity">
        <div class="n_yun">
            <img src="" alt="云朵" id="ny3" class="n_y_3">
            <img src="" alt="云朵" id="ny1" class="n_y_1">
            <img src="" alt="云朵" id="ny2" class="n_y_2">
        </div>
        <div class="n_404">
            <img src=""id="ny404" alt="">
            <div class="circle_l circle"></div>
            <div class="circle_r circle"></div>
            <div class="circle_q circle"></div>
        </div>
        <div class="text">当前页面不存在</div>
    </div>
</body>

<script type="text/javascript">  
        (function(){ 
            var curWwwPath = window.document.location.href;  
            var pathName =  window.document.location.pathname;  
            var pos = curWwwPath.indexOf(pathName);  
            var localhostPaht = curWwwPath.substring(0,pos);  
            var projectName = pathName.substring(0,pathName.substr(1).indexOf('/')+1);  
            document.getElementById("ny3").src = localhostPaht + projectName+"/404/yun2.png"; 
            document.getElementById("ny1").src = localhostPaht + projectName+"/404/yun.png"; 
            document.getElementById("ny2").src = localhostPaht + projectName+"/404/yun2.png"; 
            document.getElementById("ny404").src = localhostPaht + projectName+"/404/404.png"; 
            })();
</script>


</html>